<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>用户修改密码页</title>
  <link rel="stylesheet" href="/layui/css/layui.css">
  <link rel="stylesheet" href="/stylesheets/base.css">
  <script src="/layui/layui.js"></script>
  <script src="/javascripts/jquery.js"></script>
</head>
<body>
<form id="editForm" class="layui-form" style="margin: 10px">
  <div class="layui-form-item">
    <label class="layui-form-label" for="username"><span class="red">*</span>用户名</label>
    <div class="layui-input-block">
      <input type="text" name="username" id="username" placeholder="请输入用户名" class="layui-input" disabled>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label" for="oldPwd"><span class="red">*</span>原密码</label>
    <div class="layui-input-block">
      <input type="password" name="oldPwd" id="oldPwd" placeholder="请输入原密码" class="layui-input" lay-verify="required">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label" for="password"><span class="red">*</span>新密码</label>
    <div class="layui-input-block">
      <input type="password" name="password" id="password" placeholder="请输入新密码" class="layui-input" lay-verify="required">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label" for="confirmPwd"><span class="red">*</span>确认密码</label>
    <div class="layui-input-block">
      <input type="password" name="confirmPwd" id="confirmPwd" placeholder="请再次输入新密码" class="layui-input" lay-verify="required|confirmPwd">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label"></label>
    <div class="layui-input-block">
      <button type="submit" class="layui-btn" lay-filter="submitBtn" lay-submit>提交</button>

    </div>
  </div>
</form>
</body>
<script>
  const {form} = layui;
  $(function () {
    $("#username").val(top.loginInfo.username)
    form.verify({
      confirmPwd(value){
        if(value !== $("#password").val()){
          return "两次密码不一致";
        }
      }
    });
    form.on("submit(submitBtn)",function (data) {
      $.ajax({
        url:"/userinfo/password",
        data:data.field,
        method:"post",
        success(res) {
          if(res.code === 200){
            layer.alert(`修改密码成功！请重新登录！`,{icon:6},function (){
              top.location.replace("/")
            })
          }else{
            layer.alert(res.msg,{icon:5});
          }
        },
        error(e){
          layer.alert('与服务器断开连接...',{icon:5});
          console.log(e)
        }
      })
      return false;
    })
  })
</script>
</html>
